<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            /* width: 100%;
            height: 100%; */
            /* cursor: default; */
            /* display: block; */
        }
        #box{
    width: 300px;
    height: 300px;
    transition: all 5s;
    position: absolute;
    background-color: aqua;
    margin:10px;
    top:30%;
    /* display: inline-block; */
  }
         #box ::before{
    content: "11";
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    transform:scale(1, 0);
    transition: all 1s;
    border-left: 1px solid red;
    /* border-top: 1px solid red; */
  }
  #box ::after{
    content: "";
    position: absolute;
    bottom: -300px;
    left: -1px;
    right: -1px;
    top: 300px;
    transform:scale(1,0);
    transition: all 1s;
    /* border-top: 1px solid red; */
    border-right: 2px solid red;
    
  }
   #box:hover ::before , #box:hover ::after {
    transform:scale(1);
     transition:all 1s;
   }
   #b{
       width: 100px;
       height: 100px;
       background-color: rosybrown;
       z-index: 97;
       position: relative;
       transition: all 1s;
   }
   .b1{
    width: 80px;
       height: 80px;
       background-color: rgb(253, 0, 0);
       position: absolute;
       z-index:94;
       opacity: 0;
       transition: z-index 0.1s,opacity 3s;
   }
   .b2{
    width: 100px;
       height: 100px;
       background-color: rgb(0, 17, 255);
       position: absolute;
       z-index:98;
       transition: all 1s;
   }
    </style>
    <script>
        function on(){
            document.getElementsByClassName('b1')[0].style.zIndex='99'
            document.getElementsByClassName('b1')[0].style.opacity='1'
        }
    </script>
</head>
<body>
    <li id="box"><span></span></li>

    <div id="b">
        <div class="b1"></div>
        <div class='b2'></div>
    </div>
    <div onclick="on()">1111</div>
</body>
</html>